<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import = "com.zzty.taskapp.entity.User"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZZTY</title>
<!-- BOOTSTRAP STYLES-->
<link href="../css/bootstrap.css" rel="stylesheet" />

<!-- CUSTOM STYLES-->
<link href="../css/custom.css" rel="stylesheet" />
</head>
<script type="text/javascript">
	function getTime() {
		var date = new Date().toLocaleString();
		document.getElementById("date").value = date;
	}
	setInterval(getTime, 0);

	function ajaxCall(method, url, callBackFunction, date) {

		var httprequest = new XMLHttpRequest();
		httprequest.onreadystatechange = function() {
			if (httprequest.readyState == 4 && httprequest.status == 200) {
				callBackFunction(httprequest.responseText);
			}
		}
		httprequest.open(method, url, true);
		httprequest.setRequestHeader("X-Requested-With", "AJAX");
		httprequest.send(date);
	}
	
	function load() {
		ajaxCall("Post", "../ClassGroupServlet?operation=show", showstus);
	}
	
	var jsonObj;
	
	function showstus(result){
		var obj = JSON.parse(result);
		jsonObj = obj;
		var tmp = 0;
		for ( var i in obj){
			var stuname = obj[i].stuname;
			var stuid = obj[i].stuid;
			document.getElementById("s1").options.add(new Option(stuname, stuid));
			document.getElementById("s2").options.add(new Option(stuname, stuid));
			tmp = tmp+1;
		}
		if(tmp % 2 != 0){
			document.getElementById("s1").options.add(new Option("", "null"));
			document.getElementById("s2").options.add(new Option("", "null"));
		}
	}
	
	var stuNs="";
	
	function addToTable(){
		
		var stu1 = document.getElementById("s1");
		var index1=stu1.selectedIndex ;
		var stu1id = stu1.options[index1].value;
		var stu1name = stu1.options[index1].text;
		
		var stu2 = document.getElementById("s2");
		var index2=stu2.selectedIndex ;
		var stu2id = stu2.options[index2].value;
		var stu2name = stu2.options[index2].text;
		
		var newTr = document.getElementById("table1").insertRow();
		var newTd1 = newTr.insertCell();
		newTd1.innerText = stu1name;
		var newTd2 = newTr.insertCell();
		newTd2.innerText = stu2name;
		if(stu1name == ""){
			var newTd3 = newTr.insertCell();
			newTd3.innerText = stu2id;
			stuNs += stu2id+"_";
		}else if(stu2name == ""){
			var newTd3 = newTr.insertCell();
			newTd3.innerText = stu1id;
			stuNs += stu1id+"_";
		}else{
			var newTd3 = newTr.insertCell();
			newTd3.innerText = stu1id+"|"+stu2id;
			stuNs += (stu1id+"|"+stu2id)+"_";
		}
		var newTd4 = newTr.insertCell();
		newTd4.innerHTML = '<button type="button" onclick = "deleteR(this)" class="btn btn-primary">删除</button>';
	}
	
	function deleteR(row){
		var trow = row.parentNode.parentNode.rowIndex;
		var tb = document.getElementById("table1");
		var c2 = tb.rows[trow].cells[2].innerHTML+"_";
		stuNs = stuNs.replace(c2,"");
		document.getElementById('table1').deleteRow(trow);
	}
	
	function changeGroup(){
		var tmp = 0;
		for(var i in jsonObj){
			tmp ++;
		}
		var tb = document.getElementById("table1");
		var rows = tb.rows.length;
		//alert(rows);
		if(tmp == (rows-1)*2 || tmp == (rows-1)*2-1){
			var names = new Array();
			for(var i = 1; i < rows; i++){
				names.push((tb.rows[i].cells[0].innerHTML));
				names.push((tb.rows[i].cells[1].innerHTML));
			}
			//alert(names);
			for(var i = 0;i< names.length-1 ;i++){
				for(var j = i+1;j<names.length;j++){
					//alert("i "+names[i] + " j "+names[j])
					if(names[i] == names[j]){
						alert("分组错误");
						return;
					}
				}
			}
		}else{
			alert("分组错误");
			return;
		}
		ajaxCall("Post", "../ClassGroupServlet?operation=change", showResult ,stuNs);
	}
	
	function showResult(result){
		alert(result);
	}
	
	function judgeAdd(){
		if(document.getElementById("s1").value == "" || document.getElementById("s2").value == ""){
			document.getElementById("b1").value = "请选择";
			document.getElementById("b1").disabled="disabled";
		}else{
			document.getElementById("b1").value = "添加";
			document.getElementById("b1").disabled="";
		}
	}
	setInterval(judgeAdd, 0);
	
	<%
	User user = (User) request.getSession().getAttribute("user");
	String img = (String) user.getImg();
	%>
</script>

<body onload="load()">
	<div id="wrapper">
		<nav class="navbar navbar-default navbar-cls-top " role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<!--                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> -->
				<!--                     <span class="sr-only">Toggle navigation</span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                 </button> -->
				<a class="navbar-brand">自在天原</a>
			</div>
			<div
				style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
				<form action="../loginOut.jsp" method="post">
					<button type="submit" class="btn btn-danger">注销</ button>
				</form>
			</div>
		</nav>
		<!-- /. NAV TOP  -->
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">
					<li class="text-center"><img src="<%=img%>"
						class="user-image img-responsive" /></li>

					<li><a href="TeacherSelfExam.jsp"><i
							class="fa fa-desktop fa-3x"></i> 竞赛批改</a></li>
					<li><a href="TeamGrade.jsp"><i class="fa fa-qrcode fa-3x"></i>
							结对批改</a></li>
					<li><a href="AssginTask.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 竞赛布置</a></li>
					<li><a href="grouping.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 结对分组</a></li>
					<li><a href="StudentScore.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 学生成绩</a></li>
					<li><a href="DataBaseSelect.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 数据库查询</a></li>
				</ul>

			</div>

		</nav>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">
				<div class="row">
					<div class="col-md-12">
						<h2>结对分组</h2>
					</div>
				</div>
				<!-- /. ROW  -->
				<hr />
				<div class="col-sm-offset-10 col-sm-2">
					<input id="date" style="background: transparent; border: none;"
						disabled="true"font-size:50px;"></input>
				</div>

				<div class="row" style="padding: 50px 0px 0px 0px">
					<div class="col-sm-offset-5 col-sm-7">
						<h3>
							<font face="隶书" color="	">请 选 择 结 对 成 员</font>
						</h3>
					</div>
					<div class="col-sm-offset-4 col-sm-8"
						style="padding: 40px 0px 0px 0px">
						组员一:<select id="s1" style="width: 200px"></select> 组员二:<select
							id="s2" style="width: 200px"></select>
					</div>
				</div>

				<div class="row" style="padding: 30px 0px 0px 125px">
					<div class="col-sm-offset-5 col-sm-7">
						<input type="button" id="b1" class="btn btn-primary"
							onclick="addToTable()" value="添加" /><br />
					</div>
					<div class="row" style="padding: 30px 0px 0px 100px">
						<div class="col-sm-offset-4 col-sm-8">
							<font color="#FF0000">Tip:若需单人组队，一组员选空白</font><br />
						</div>
					</div>
				</div>

				<div class="row" style="padding: 50px 0px 0px 0px">
					<div class="table-responsive">
						<table class="table table-striped" id="table1"
							style="text-align: center">
							<thead>
								<tr>
									<th style="text-align: center">组员1</th>
									<th style="text-align: center">组员2</th>
									<th style="text-align: center">组员id</th>
									<th style="text-align: center">删除</th>
								</tr>
							</thead>
							<tbody>

							</tbody>
						</table>
					</div>
				</div>

				<div class="row" style="padding: 30px 0px 0px 125px">
					<div class="col-sm-offset-5 col-sm-7">
						<input type="button" class="btn btn-primary"
							onclick="changeGroup()" value="提交" />
					</div>
				</div>

			</div>
		</div>
		<!-- /. PAGE INNER  -->
	</div>
	<!-- /. PAGE WRAPPER  -->

	<!-- /. WRAPPER  -->
	<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
	<!-- JQUERY SCRIPTS -->
	<script src="../js/jquery-1.10.2.js"></script>
	<!-- BOOTSTRAP SCRIPTS -->
	<script src="../js/bootstrap.min.js"></script>
	<!-- METISMENU SCRIPTS -->
	<script src="../js/jquery.metisMenu.js"></script>